<template>
	<a-modal
		:title="title"
		:width="600"
		:visible="visible"
		:confirmLoading="confirmLoading"
		@ok="handleOk"
		@cancel="handleCancel"
		cancelText="关闭"
	>
		<a-spin :spinning="confirmLoading">
			<a-form-model
				layout="horizontal"
				labelAlign="right"
				ref="ruleForm"
				:label-col="labelCol"
				:wrapper-col="wrapperCol"
				:model="form"
				:rules="validatorRules"
			>
				<a-form-model-item label="名称" prop="itemText">
					<a-input
						placeholder="请输入名称"
						:disabled="disableSubmit"
						v-model.trim="form.itemText"
					/>
				</a-form-model-item>
				<a-form-model-item label="数据值" prop="itemValue">
					<a-input
						placeholder="请输入数据值"
						:disabled="disableSubmit"
						v-model.trim="form.itemValue"
					/>
				</a-form-model-item>
				<a-form-model-item label="排序值">
					<a-input-number
						:disabled="disableSubmit"
						style="width:100%;"
						placeholder="请输入排序值"
						v-model="form.itemSort"
					/>
				</a-form-model-item>
				<a-form-model-item label="是否启用">
					<a-radio-group :disabled="disableSubmit" v-model="form.itemStatus">
						<a-radio value="1">启用</a-radio>
						<a-radio value="0">停用</a-radio>
					</a-radio-group>
				</a-form-model-item>
				<a-form-model-item label="描述">
					<a-input
						:disabled="disableSubmit"
						type="textarea"
						v-model="form.itemDesc"
					/>
				</a-form-model-item>
			</a-form-model>
		</a-spin>
	</a-modal>
</template>

<script>
import pick from 'lodash/pick'
// import { postAction, putAction } from '@/services/manage'
import { addDictItem, editDictItem } from '@/services/dict'
export default {
  name: 'DictItemModal',
  props: ['code'],
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: {},
      validatorRules: {
        itemText: [{ required: true, message: '请输入名称' }],
        itemValue: [{ required: true, message: '请输入数据值' }]
      },
      disableSubmit: false
    }
  },
  methods: {
    add() {
      this.edit({ itemStatus: '1', itemSort: 1 })
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.form = pick(
        this.model,
        'id',
        'itemDesc',
        'itemValue',
        'itemText',
        'itemSort',
        'itemStatus'
      )
    },
    // 确定
    handleOk() {
      // 触发表单验证
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          const formData = Object.assign(this.model, this.form)
          if (formData.id) {
            editDictItem(this.code, formData)
              .then((res) => {
                if (res.success) {
                  this.$message.success(res.message)
                  this.$emit('ok')
                  this.close()
                } else {
                  this.$message.warning(res.message)
                }
              })
              .finally(() => {
                this.confirmLoading = false
              })
          } else {
            addDictItem(this.code, formData)
              .then((res) => {
                if (res.success) {
                  this.$message.success(res.message)
                  this.$emit('ok')
                  this.close()
                } else {
                  this.$message.warning(res.message)
                }
              })
              .finally(() => {
                this.confirmLoading = false
              })
          }
        }
      })
    },
    // 关闭
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.$refs.ruleForm.resetFields()
      this.visible = false
    }
  }
}
</script>
